{% extends "promisecheck/layout.html" %}

{% block head %}
<style type="text/css">

.card {
  width: 500px;
  border: 1px solid black;
}

.aside {
  float: right;
}

.photo {
  width:100px;
  height: 100px;
  border: 1px solid black;
}

.stats {
  width:100px;
  border: 1px solid black;
}

.stats ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

.spacer {
  clear: both;
}
</style>

{% endblock %}

{% block content %}
<div class="card">
  <div class="aside">
    <div class="photo"></div>
    <div class="stats">
       <p>Declarations: {{ stats.total }}</p>
       <ul>
       {% for id,val in stats.items %}
         {% ifnotequal  id 'total' %}
         <li>{{id}}: {{val}}</li>
         {% endifnotequal %}
       {% endfor %}
       </ul>
    </div>
  </div>
  <h2>{{ cycle.name }}</h2>
  <div class="spacer"></div>
  <ul>
  {% for person in people %}
    <li><a href="{% url promisecheck.views.person person.id %}">{{ person.name }}</a></li>
  {% endfor %}
  </ul>
</div>
<a href="{%url promisecheck.views.index %}">&lt; Przejdź do listy</a>
{% endblock %}